<script setup>
  import * as echarts from 'echarts'
  import {onMounted} from "vue";
  import {ref} from "vue";
  import chartApi from "@/api/chart.js";
  const chartRef1 = ref()
  const chartRef2 = ref()

  onMounted(() => {
    const myChart1 = echarts.init(chartRef1.value)
    const myChart2 = echarts.init(chartRef2.value)
    chartApi.selectCoachCount().then(result => {
      if (result.code ==  0) {
        const option1 = {
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: result.data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        myChart1.setOption(option1)


        //柱状图
       //[{"name": "小张", "value": 3}, {"name": "小王", "value": 1}]
        var list = result.data
        var xArray = new Array()
        var yArray = new Array()
        for (var i = 0; i < list.length; i++) {
          xArray.push(list[i].name)
          yArray.push(list[i].value)
        }
        // 指定图表的配置项和数据
        var option2 = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: xArray
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: yArray
            }
          ]
        };

        myChart2.setOption(option2)
      }
    })
  })

</script>

<template>
  <div ref="chartRef1" style="width: 600px;height:400px;"></div>
  <div ref="chartRef2" style="width: 600px;height:400px;"></div>
</template>

<style scoped>

</style>